@font-face {
    font-family: 'FuroreRegular';
    src: url('../fonts/furore-webfont.woff') format('woff'),
         url('../fonts/furore-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

#keypad {
	width:320px;
	height:350px;
	border-radius:5px;
	margin:-210px 0 0 -160px;
	position:absolute;
	left:50%;
	top:50%;
	background:url(../images/keypad.png);

	.on {
		width:200px;
		height:6px;
		border-bottom:1px solid #333;
		border-radius:20px;
		position:relative;
		z-index:2;
		margin:50px auto 40px;
		box-shadow:0 0 20px #ff0000;

		background: #ff3232; /* Old browsers */
		/* IE9 SVG, needs conditional override of 'filter' to 'none' */
		background: url();
		background: -moz-linear-gradient(left,  #ff3232 0%, #ffc4c4 50%, #ff0000 100%); /* FF3.6+ */
		background: -webkit-linear-gradient(left,  #ff3232 0%,#ffc4c4 50%,#ff0000 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(left,  #ff3232 0%,#ffc4c4 50%,#ff0000 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(left,  #ff3232 0%,#ffc4c4 50%,#ff0000 100%); /* IE10+ */
		background: linear-gradient(left,  #ff3232 0%,#ffc4c4 50%,#ff0000 100%); /* W3C */
	}

	.on .pass {
		content:"";
		display:block;
		width:200px;
		height:6px;
		border-radius:20px;
		position:absolute;
		left:0;
		top:0;
		z-index:3;
		box-shadow:0 0 20px #126fa9;

		/* IE9 SVG, needs conditional override of 'filter' to 'none' */
		background: url();
		background: -moz-linear-gradient(left,  #126fa9 0%, #89c3eb 50%, #126fa9 100%); /* FF3.6+ */
		background: -webkit-linear-gradient(left,  #126fa9 0%,#89c3eb 50%,#126fa9 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(left,  #126fa9 0%,#89c3eb 50%,#126fa9 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(left,  #126fa9 0%,#89c3eb 50%,#126fa9 100%); /* IE10+ */
		background: linear-gradient(left,  #126fa9 0%,#89c3eb 50%,#126fa9 100%); /* W3C */
	}

	form {
		text-align:center;
		word-spacing:-1em;
		width:200px;
		height:190px;
		margin:0 auto;

		div, input, div::before {
			border-radius:5px;
		}

		div {
			width:56px;
			height:56px;
			margin-bottom:15px;
			position:relative;
			float:left;
			background:rgba(0, 0, 0, .2);
		}

		div::before {
			content:" ";
			display:block;
			width:50px;
			height:52px;
			position:absolute;
			left:3px;
			top:3px;
			z-index:1;

			/* IE9 SVG, needs conditional override of 'filter' to 'none' */
			background: url();
			background: -moz-linear-gradient(left,  #4d4d4d 0%, #1a1a1a 12%, #1a1a1a 55%, #808080 88%, #4d4d4d 99%); /* FF3.6+ */
			background: -webkit-linear-gradient(left,  #4d4d4d 0%,#1a1a1a 12%,#1a1a1a 55%,#808080 88%,#4d4d4d 99%); /* Chrome10+,Safari5.1+ */
			background: -o-linear-gradient(left,  #4d4d4d 0%,#1a1a1a 12%,#1a1a1a 55%,#808080 88%,#4d4d4d 99%); /* Opera 11.10+ */
			background: -ms-linear-gradient(left,  #4d4d4d 0%,#1a1a1a 12%,#1a1a1a 55%,#808080 88%,#4d4d4d 99%); /* IE10+ */
			background: linear-gradient(left,  #4d4d4d 0%,#1a1a1a 12%,#1a1a1a 55%,#808080 88%,#4d4d4d 99%); /* W3C */
		}

		div:nth-child(3n-2),
		div:nth-child(3n-1) {
			margin-right:16px;
		}

		input {
			color:#111;
			font:40px/50px 'FuroreRegular', Curier;
			text-align:center;
			text-shadow:0 1px 0 #fff;
			width:50px;
			height:50px;
			border:0 none;
			position:absolute;
			top:3px;
			left:3px;
			z-index:2;
			cursor:pointer;
			.transition(all, .2s);

			/* IE9 SVG, needs conditional override of 'filter' to 'none' */
			background: url();
			background: -moz-linear-gradient(top, #f2f2f2 0%, #e6e6e6 100%); /* FF3.6+ */
			background: -webkit-linear-gradient(top, #f2f2f2 0%,#e6e6e6 100%); /* Chrome10+,Safari5.1+ */
			background: -o-linear-gradient(top, #f2f2f2 0%,#e6e6e6 100%); /* Opera 11.10+ */
			background: -ms-linear-gradient(top, #f2f2f2 0%,#e6e6e6 100%); /* IE10+ */
			background: linear-gradient(top, #f2f2f2 0%,#e6e6e6 100%); /* W3C */
		}

	}

}

#keypad.on {
	input:active {
		color:#ff0000;
		text-shadow:0 0 10px #ff0000, 0 1px 0 #fff;
		top:4px;
	}
}

#keypad.off {
	.on {
		background: #111;
		box-shadow:none;
	}
}